{/* 行业趋势—视频篇 */ }


import React, { useRef, useCallback } from 'react';

// 定义视频画廊的属性接口
interface VideoGalleryProps {
    videos: string[]; // 视频源数组
}

// 创建视频画廊组件
const VideoGallery: React.FC<VideoGalleryProps> = ({ videos }) => {
    // 创建引用，分别用于主视频和其他视频
    const mainVideoRef = useRef<HTMLVideoElement | null>(null);
    const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);

    // 鼠标悬停处理函数，播放视频
    const handleMouseEnter = useCallback((index: number) => {
        if (videoRefs.current[index]) {
            videoRefs.current[index]?.play(); // 播放当前视频
        }
        if (index === 0 && mainVideoRef.current) {
            mainVideoRef.current.play(); // 播放主视频
        }
    }, []);

    // 鼠标离开处理函数，暂停视频
    const handleMouseLeave = useCallback((index: number) => {
        if (videoRefs.current[index]) {
            videoRefs.current[index]?.pause(); // 暂停当前视频
        }
        if (index === 0 && mainVideoRef.current) {
            mainVideoRef.current.pause(); // 暂停主视频
        }
    }, []);

    return (
        <div className='focus_bottom_shi'> {/* 整个视频画廊容器 */}
            <div className='img_left'> {/* 主视频区域 */}
                <video
                    controls // 启用控制条
                    ref={mainVideoRef} // 设置引用
                    onMouseEnter={() => handleMouseEnter(0)} // 鼠标悬停时播放
                    onMouseLeave={() => handleMouseLeave(0)} // 鼠标离开时暂停
                >
                    <source src={videos[0]} type="video/mp4" /> {/* 主视频源 */}
                </video>
            </div>
            <div className='img_right'> {/* 其他视频区域 */}
                {videos.slice(1).map((src, index) => ( // 从第二个视频开始遍历
                    <div
                        key={index} // 唯一键值
                        onMouseEnter={() => handleMouseEnter(index + 1)} // 鼠标悬停时播放
                        onMouseLeave={() => handleMouseLeave(index + 1)} // 鼠标离开时暂停
                    >
                        <video
                            ref={el => videoRefs.current[index + 1] = el} // 设置引用
                            width="150" // 设置视频宽度
                            muted // 静音
                        >
                            <source src={src} type="video/mp4" key={index} /> {/* 视频源 */}
                        </video>
                    </div>
                ))}
            </div>
        </div>
    );
};

// 导出组件
export default VideoGallery;
